import React from 'react';
import {
  Box,
  Typography,
  Rating,
  Avatar,
  Paper,
  Stack,
  LinearProgress,
  Button,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Pagination,
} from '@mui/material';

interface Review {
  id: number;
  user: {
    name: string;
    avatar: string;
  };
  rating: number;
  date: string;
  content: string;
  helpfulCount: number;
}

interface GameReviewsProps {
  stats: {
    averageRating: number;
    totalReviews: number;
    ratingDistribution: number[];
  };
  reviews: Review[];
}

const GameReviews: React.FC<GameReviewsProps> = ({ stats, reviews }) => {
  const [sortBy, setSortBy] = React.useState('recent');

  return (
    <Box sx={{ py: 4 }}>
      {/* 评分统计 */}
      <Paper sx={{ p: 3, mb: 4 }}>
        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {/* 左侧总体评分 */}
          <Box sx={{ textAlign: 'center', minWidth: 200 }}>
            <Typography variant="h3" component="div" gutterBottom>
              {stats.averageRating.toFixed(1)}
            </Typography>
            <Rating value={stats.averageRating} precision={0.1} readOnly size="large" />
            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
              {stats.totalReviews} 条评论
            </Typography>
          </Box>

          {/* 右侧评分分布 */}
          <Box sx={{ flex: 1 }}>
            {[5, 4, 3, 2, 1].map((rating) => (
              <Box key={rating} sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                <Typography sx={{ mr: 1, minWidth: 20 }}>{rating}</Typography>
                <LinearProgress
                  variant="determinate"
                  value={(stats.ratingDistribution[5 - rating] / stats.totalReviews) * 100}
                  sx={{ flex: 1, mr: 1 }}
                />
                <Typography variant="body2" color="text.secondary" sx={{ minWidth: 40 }}>
                  {Math.round((stats.ratingDistribution[5 - rating] / stats.totalReviews) * 100)}%
                </Typography>
              </Box>
            ))}
          </Box>
        </Box>
      </Paper>

      {/* 评论过滤和排序 */}
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
        <Button variant="contained" color="primary">
          写评论
        </Button>
        <FormControl sx={{ minWidth: 200 }}>
          <InputLabel>排序方式</InputLabel>
          <Select
            value={sortBy}
            label="排序方式"
            onChange={(e) => setSortBy(e.target.value)}
          >
            <MenuItem value="recent">最新</MenuItem>
            <MenuItem value="helpful">最有帮助</MenuItem>
            <MenuItem value="rating">评分</MenuItem>
          </Select>
        </FormControl>
      </Box>

      {/* 评论列表 */}
      <Stack spacing={2}>
        {reviews.map((review) => (
          <Paper key={review.id} sx={{ p: 2 }}>
            <Box sx={{ display: 'flex', gap: 2 }}>
              <Avatar src={review.user.avatar} alt={review.user.name} />
              <Box sx={{ flex: 1 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="subtitle1">
                    {review.user.name}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {review.date}
                  </Typography>
                </Box>
                <Rating value={review.rating} size="small" readOnly sx={{ mb: 1 }} />
                <Typography variant="body1" paragraph>
                  {review.content}
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Button size="small" startIcon={<Typography>👍</Typography>}>
                    有帮助 ({review.helpfulCount})
                  </Button>
                </Box>
              </Box>
            </Box>
          </Paper>
        ))}
      </Stack>

      {/* 分页 */}
      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
        <Pagination count={10} color="primary" />
      </Box>
    </Box>
  );
};

export default GameReviews;
